<template>
  <div class="login-page">
    <login-header title="登录bilibili" subtitle="短信登录"></login-header>
    <login-input v-model="model.username" label="账号" type="text" placeholder="你的账号" rule="^.{4,12}$"
      @inputHandler="res => (model.username = res.flag ? res.value : '')" />
    <login-input v-model="model.password" label="密码" type="password" placeholder="请输入密码" rule="^.{4,12}$"
      @inputHandler="res => (model.password = res.flag ? res.value : '')" />
    <div class="btns">
      <button class="RegisterBtn" @click="$router.push('/register')">
        注册
      </button>
      <button class="LoginBtn" @click="LoginHandler">登录</button>
    </div>
  </div>
</template>

<script>
import LoginHeader from '../components/common/LoginHeader'
import LoginInput from '../components/common/LoginInput'
export default {
  components: {
    LoginHeader,
    LoginInput
  },
  data () {
    return {
      model: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async LoginHandler () {
      const res = await this.$http.post('/login', this.model)
      localStorage.token = res.data.token
      this.$notify({ type: 'success', message: '登录成功' })
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  .btns {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
    .LoginBtn {
      color: white;
      background: #ff9db5;
    }
    .RegisterBtn {
      border: 1px solid #fb7299;
      color: #fb7299;
    }
  }
  button {
    width: 150px;
    height: 40px;
    padding: 0 9.6px;
    font-size: 13.4px;
    border: none;
    border-radius: 5px;
  }
}
</style>
